<template>
  <div class="mt-[16px]">
    <div class="form-title">
      退款信息
      <div class="status" v-if="isEdit">{{ info.refund_status_desc }}</div>
    </div>
    <XForm ref="form" :formData="info" :fieldList="fieldList" :options="formOption" :rules="rules" :disabled="disabled" v-if="show"> </XForm>
  </div>
</template>

<script setup>
import XForm from "@/components/XForm/index.vue"
const props = defineProps({
  country: {
    type: Array,
    default: () => [],
  },
  info: { type: Object, default: () => ({}) },
  disabled: { type: Boolean, default: false },
  isEdit: { type: Boolean, default: false },
})
import { overallOptions } from "@/api/public"

const refundChannelOpt = ref([])
const show = ref(false)
onMounted(async () => {
  const res = await overallOptions({ params: ["refund_channel"], option: "new" })
  refundChannelOpt.value = res.data.refund_channel
  // 临时方案  待重构
  setTimeout(() => {
    show.value = true
  }, 500)
})
const publicStyle = { style: { width: "260px" } }
const form = ref()
const fieldList = ref([
  {
    field: "refund_channel",
    label: "退款渠道",
    type: "radio",
    options: {
      data: refundChannelOpt,
    },
    style: { width: "900px" },
  },
  {
    field: "refund_method",
    label: "退款方式",
    type: "select",
    origin: "payment_method",
    style: { width: "160px" },
  },
  {
    field: "refund_bank",
    label: "退款银行",
    ...publicStyle,
  },
  {
    field: "payee",
    label: "收款人",
    ...publicStyle,
  },
  {
    field: "accounts_receivable",
    label: "收款账户",
    ...publicStyle,
  },
])
const rules = reactive({
  refund_channel: [{ required: true, message: "请选择退款渠道", trigger: "change" }],
  // payee: [{ required: true, message: '请输入收款人', trigger: 'blur' }],
})
const formOption = ref({
  inline: true,
  labelPosition: "top",
  // requireAsteriskPosition: "right"
})

defineExpose({
  form,
})
</script>

<style lang="scss" scoped>
.form-title {
  width: 100%;
  font-size: 16px;
  font-weight: 500;
  // color: #0a1431;
  line-height: 22px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  .status {
    padding: 1px 2px;
    margin-left: 4px;
    font-size: 8px;
    font-weight: 400;
    color: #ffffff;
    line-height: 14px;
    background: #faad14;
    border-radius: 4px 4px 4px 0px;
  }
  &:before {
    content: "";
    width: 2px;
    height: 14px;
    background: #3487ff;
    margin-right: 4px;
  }
}
:deep(.el-radio__label) {
  color: var(--base-text-color);
}
</style>
